import * as THREE from 'three'
import {MeshBasicMaterial} from "three";

// define size
const SIZE = {
    width: 800,
    height: 600
}

// get canvas
const canvas = document.querySelector(".canvas")

// create a scene
const scene = new THREE.Scene();

// create objects
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new MeshBasicMaterial({color: 'red'})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// create Camera
const camera = new THREE.PerspectiveCamera(75, SIZE.width / SIZE.height)
scene.add(camera)
camera.position.z = 5

// create render
const render = new THREE.WebGLRenderer({
    canvas: canvas
})
// resize
render.setSize(SIZE.width, SIZE.height)
render.render(scene, camera)